<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			#box{
				height:100px;
				width:100px;
				background-color: #00BFFF;
				position: fixed;
				left:0;
				top:0;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<script>
			let box=document.getElementById("box");
			let beginX,beginY;
			//鼠标移动到小盒子里面按下
			box.onmousedown=function(e){
				//初始坐标
				beginX=e.offsetX;
				beginY=e.offsetY;
				//console.log(beginX,beginY);
				//鼠标抬起的一瞬间，小盒子位置发生变化
				window.addEventListener("mouseup",move)
			}
			
			function move(e){
				let endX=e.clientX;
				let endY=e.clientY;
				
			    //小盒子位置发生变化
				box.style.left=(endX-beginX)+"px";
				box.style.top=(endY-beginY)+"px";
				
				//删除抬起事件
				window.removeEventListener("mouseup",move);
			}
		</script>
	</body>
</html>
